2<template>
  <div class="page-editor">
    <div class="tinymce-editor">
      <tinymce v-model="articalContent" @input="count"></tinymce>
    </div>

    <div id="app" class="building">
    <div class="backgroud-box-ins">
      <div
        style="
          margin-top: 30px;
          width: 70%;
          text-align: center;
          display: inline-block;
        "
      >
        <el-form
          ref="elForm"
          :model="formData"
          :rules="rules"
          size="medium"
          label-width="100px"
          @submit.native.prevent
        >
          <!-- 第一行 -->
          <el-row>
            <!-- 传封面 -->
            <el-col :span="10">
              <el-form-item label="上传封面:" prop="cover" required>
                <div style="float: left; margin-left: 5px">
                  <el-radio v-model="hasCover" label="1">单图</el-radio>
                  <el-radio v-model="hasCover" label="2" @change="clearImg"
                    >无封面</el-radio
                  >
                </div>
                <!-- 上传 -->
                <el-upload
                  v-if="hasCover == 1 && !isShowImgUpload"
                  action="#"
                  accept="image/png,image/jpg,image/jpeg"
                  list-type="picture-card"
                  :on-change="imgSaveToUrl"
                  :auto-upload="false"
                >
                  <i slot="default" class="el-icon-plus"></i>
                </el-upload>
                <!-- 预览 -->
                <div class="X-box" v-if="isShowImgUpload">
                  <el-image
                    :src="localUrl"
                    :preview-src-list="[localUrl]"
                    style="
                      width: 100%;
                      height: 100%;
                      position: absolute;
                      display: block;
                    "
                    fit="scale-down"
                  ></el-image>
                  <span class="XX" @click="uploadButtonClick">X</span>
                </div>
                <div class="el-upload__tip" v-if="hasCover == 1">
                  优质的封面有利于推荐
                </div>
              </el-form-item>
            </el-col>
            <!-- 右上展示 -->
          </el-row>
          <!-- 第二行 -->
          <el-form-item
            label="博客标题:"
            prop="textarea"
            style="margin-top: 20px"
          >
            <el-input
              type="textarea"
              placeholder="推荐格式：内容概要+适用人群+使用场景及目标+其他说明"
              v-model="formData.textarea"
              maxlength="500"
              show-word-limit
              :rows="7"
            >
            </el-input>
          </el-form-item>
          <!-- 第三行 -->
          <el-form-item
            label="资源标签:"
            prop="tags"
            style="margin-top: 20px"
            required
          >
            <el-tag
              style="float: left"
              :key="tag"
              v-for="tag in formData.tags"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
            >
              {{ tag }}
            </el-tag>
            <el-button
              v-if="formData.tags.length != totalTag"
              class="button-new-tag"
              size="small"
              @click="showDialog"
              >+添加标签</el-button
            >
            <el-dialog
              class="tag-dialog"
              :visible.sync="tagVisible"
              :modal-append-to-body="false"
              title="标签"
            >
              <el-input
                placeholder="请输入文字搜索，Enter键入可添加自定义标签"
                v-model="input"
                @keyup.enter.native="handleInputConfirm"
                clearable
              >
              </el-input>
              <el-row style="width: 100%; height: 300px">
                <el-col :span="8">
                  <div style="text-align: left; margin-left: 10px">推荐</div>
                  <div
                    style="
                      height: 250px;
                      text-align: left;
                      margin-left: 10px;
                      overflow: auto;
                    "
                  >
                    <div v-for="item in tagList" :key="item">
                      <el-button type="text" @click="setTag(item)">{{
                        item
                      }}</el-button>
                    </div>
                  </div>
                </el-col>
                <el-col :span="16" style="text-align: left">
                  已添加标签：<br />
                  <el-tag
                    style="float: left"
                    :key="tag"
                    v-for="tag in formData.tags"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag)"
                  >
                    {{ tag }}
                  </el-tag>
                  <div class="bottom-tip">
                    还可添加{{ totalTag - formData.tags.length }}个标签
                  </div>
                </el-col>
              </el-row>
            </el-dialog>
          </el-form-item>
          <!-- 第四行 -->
          <el-form-item
            label="分类专栏:"
            prop="classValue"
            style="margin-top: 20px"
          >
            <el-select v-model="formData.classValue" placeholder="请选择">
              <el-option
                v-for="item in srcClass"
                :key="item.columnName"
                :label="item.columnName"
                :value="item.columnName"
              >
                <img src="@/assets/image/upload/warn.png" style="float: left" />
                <span>{{ item.columnName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px"
                  >{{ item.fileNum }}篇</span
                >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- 其余内容 -->
          <div
            style="
              float: left;
              width: 50px;
              margin-left: 20px;
              margin-top: 20px;
            "
          >
            <img
              src="@/assets/image/upload/warning.png"
              height="40px"
              width="40px"
              align="top"
              alt=""
            />
          </div>
          <div style="float: left; margin-top: 30px">
            <b>请您根据上传资源的敏感度，设置其可见度:</b><br />
          </div>
          <div class="groupBox">
            <el-radio-group v-model="radio">
              <el-radio :label="1" @change="allSee">全部可见</el-radio>
              <el-radio :label="0" class="radio0" @change="ISee"
                >仅我可见</el-radio
              >
              <!-- 可见名单 -->
              <el-popover placement="top" trigger="click" v-model="partVisible">
                <el-checkbox-group
                  class="checkbox-inline"
                  v-model="dept"
                  v-for="item in departmentArr"
                  :key="item"
                >
                  <el-checkbox :label="item" :key="item">{{
                    item
                  }}</el-checkbox>
                </el-checkbox-group>
                <el-radio
                  slot="reference"
                  class="radio2"
                  :label="2"
                  @change="partSee"
                  >部分可见</el-radio
                >
              </el-popover>
              <!-- 不可见名单 -->
              <span>
                <el-popover placement="top" trigger="click" v-model="noVisible">
                  <el-checkbox-group
                    class="checkbox-inline"
                    v-model="noDept"
                    v-for="item in departmentArr"
                    :key="item"
                  >
                    <el-checkbox class="no-see" :label="item" :key="item">{{
                      item
                    }}</el-checkbox>
                  </el-checkbox-group>
                  <el-radio
                    slot="reference"
                    class="radio3"
                    :label="3"
                    @change="noSee"
                    >谁不可见</el-radio
                  >
                </el-popover>
              </span>
            </el-radio-group>
          </div>
          <!-- 按钮 -->
          <div class="upload-button">
            <el-button
              type="primary"
              class="confirm-button"
              @click="showSecondConfirmDialog()"
              >上传</el-button
            >
            <el-button class="cancel-button" @click="onCancel">取消</el-button>
          </div>
        </el-form>
      </div>
    </div>
    <!-- 成功后跳转页 -->
    <el-dialog
      width="30%"
      :show-close="false"
      :visible.sync="jumpVisible"
      :modal-append-to-body="false"
    >
      <div class="success-jump">
        <p>
          <b>恭喜您成功上传文件，<br />您可以前往个人主页进行查看</b>
        </p>
        <el-button
          type="text"
          style="color: black; margin-top: 100px"
          @click="onCancel"
          >知道了</el-button
        ><br />
        <el-button type="primary" style="width: 120px" @click="jumpToMyDoc"
          >现在去</el-button
        >
      </div>
    </el-dialog>
    <!-- 上传加载 -->
    <el-dialog
      :visible.sync="progressVisible"
      width="30%"
      :show-close="false"
      :modal-append-to-body="false"
      class="loading-dialog"
    >
      <section
        v-loading="loading"
        element-loading-text="拼命上传中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      ></section>
    </el-dialog>
  </div>
    <!-- <div class="detail-editor">
      <detail @extract="extract" :digest="digest.replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi,'').replace(/<[^>]+?>/g,'').replace(/\s+/g,' ').replace(/ /g,' ').replace(/>/g,' ')"
         ref="getVal" @changes="changes"></detail>
    </div>
    <div class="empty"></div>
    <floor-vue :totle="totle" @sub="sub"></floor-vue> -->
  </div>
</template>
<script>
import detail from '@/components/Editor/Common/Detail'
import floorVue from '@/components/Editor/Floor/Floor'
import tinymce from '@/components/Editor/TinyMce/index'
import axios from "axios";
import { getNameList, getTagsList, getClassList } from "@/api/upload/upload";
import { upload } from '@/api/editor/editor';
export default {
  components: {
    detail,
    floorVue,
    tinymce,
  },
  data(){
    return{
      articalContent:'',
      digest:'',
      real:'',
      totle:0,
      meg:{
        artContent:'',
        cov:'',
        img:'',
        dig:'',
        artTitle:'',
        spe:'',
        form:'',
      },
      userId: this.$store.getters.userId,
      hasCover: "1",
      fileType: 1,
      loading: false,
      isShowImgUpload: 0,
      isTagRepeat: 0,
      coverImg: null,
      radio: 1,

      partVisible: false,
      noVisible: false,
      tagVisible: false,
      jumpVisible: false,
      progressVisible: false,
      departmentArr: [
        "xx1事业部",
        "xx2事业部",
        "xx3事业部",
        "xx4事业部",
        "xx5事业部",
        "数据测试",
      ],
      dept: [],
      noDept: [],
      input: "",
      totalTag: 5,
      tag: ["Python", "Java", "编程语言", "开发工具", "数据结构与算法"],
      srcClass: [
        {
          value: "业界资讯",
          num: 5,
          icon: require("@/assets/image/upload/warn.png"),
        },
        {
          value: "业",
          num: 4,
          icon: require("@/assets/image/upload/warn.png"),
        },
        {
          value: "界",
          num: 58,
          icon: require("@/assets/image/upload/warn.png"),
        },
        {
          value: "资",
          num: 3,
          icon: require("@/assets/image/upload/warn.png"),
        },
        {
          value: "讯",
          num: 748,
          icon: require("@/assets/image/upload/warn.png"),
        },
      ],
      formData: {
        textarea: "",
        tags: [],
        classValue: "",
      },
      rules: {
        textarea: [{ required: true, message: "请填写说明", trigger: "blur" }],
        classValue: [
          {
            required: true,
            message: "请选择分类",
            trigger: "change",
          },
        ],
      },
    }
  },
  created() {
    console.log(this.file);

    axios
      .all([getNameList(), getClassList()])
      .then(
        axios.spread((res1, res2) => {
          this.departmentArr = res1.data;
          this.srcClass = res2.data;
        }),
        console.log(this.departmentArr,this.srcClass)
      )
      .catch((e) => {
        // alert("获取数据失败");
        console.log(e);
      });
    },
    computed: {
    // eslint-disable-next-line vue/no-dupe-keys
    tagList() {
      var _this = this;
      return this.tag.filter(function (item) {
        return item.indexOf(_this.input) != -1;
      });
    },
  },
  methods: {
    extract(){
      this.digest=this.articalContent;
    },
    count(){
      this.real=this.articalContent.replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi,'').replace(/<[^>]+?>/g,'').replace(/\s+/g,' ').replace(/ /g,' ').replace(/>/g,' ');
      this.totle=this.real.length;
    },
    sub(){
      this.meg.artContent=this.articalContent;
      this.meg.cov=this.$refs['getVal'].getVals()[0];
      if (this.meg.cov==='单图')
      this.meg.img=this.$refs['getVal'].getImg();
      else 
      this.meg.img = '';
      this.meg.img
      this.meg.dig=this.real;
      // this.artTitle=
      // this.meg.spe=
      this.meg.form=this.$refs['getVal'].getVals()[1];
      console.log(this.meg)
    },
    changes(val){
      this.real=val;
      this.digest=val;
    },
    upload() {
      this.progressVisible = true;
      this.loading = true;
      // let data1 = {};
      // data1['userId'] = this.userId;
      // data1['content'] = this.articalContent;
      // data1['blogImageBase64'] = this.coverImg;
      // data1['fileName'] = this.formData.textarea;
      // data1['labelIdList'] = [111,112];
      // // data1['fileClass'] = this.formData.classValue;
      // data1['fileType'] = this.fileType;
      // data1['deptNameList'] = this.dept;
      // var formData = JSON.stringify(data1)
      // console.log(formData);
      let data = new FormData();
      data.append("userId", this.userId);
      data.append("content", this.articalContent);
      data.append("fileCover", this.coverImg);
      data.append("fileName", this.formData.textarea);
      data.append("fileType", this.fileType);
      data.append("deptNameList", this.dept);
      console.log(this.userId);
      console.log(this.file);
      console.log(this.coverImg);
      console.log(this.formData.textarea);
      console.log(this.fileType);
      console.log(this.dept);
      //axios
      upload(data)
        .then((res) => {
          let value = res.code;
          if (value == 200) {
            this.progressVisible = false;
            this.loading = false;
            this.jumpVisible = true;
            // this.percent = 0;
          } else if (value == 500) {
            this.progressVisible = false;
            this.loading = false;
            this.$message({
              type: "error",
              message: res.data.msg,
            });
            for (var i = 0; i < res.data.data.length; i++) {
              if (res.data.data[i].code == 500) {
                this.$message({
                  type: "error",
                  message: res.data.data[i].msg,
                });
              }
            }
          }
        })
        .catch((e) => {
          this.progressVisible = false;
          this.loading = false;
          this.$message({
            type: "error",
            message: "上传失败",
          });
          console.log(e);
        }); // 发送请求
    },
    onCancel() {
      this.$router.push("/uploadResource");
    },
    // 二次确认
    async showSecondConfirmDialog() {
      const url = require("@/assets/image/upload/warn.png");
      if (this.radio == 1) {
        const confirmRes = await this.$confirm(
          "<img src=" +
            url +
            `><br><br><br><p style="font-size: 22px">请您再次确认上传文件的类型为：<br><span style="color:#169BD5;
            font-weight:bolder;font-size: 27px">全部可见</span>？</p>`,
          "",
          {
            dangerouslyUseHTMLString: true,
            customClass: "uploadBox_class",
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            cancelButtonClass: "btn-upload-cancel",
            confirmButtonClass: "btn-upload-confirm",
            center: true,
            showClose: false,
            type: "warning",
          }
        ).catch((err) => err); //用catch来捕获错误消息
        if ("confirm" === confirmRes) {
          //用户点击了确认
          this.upload();
        }
      } else if (this.radio == 2) {
        const confirmRes = await this.$confirm(
          "<img src=" +
            url +
            `><br><br><br><p style="font-size: 22px">请您再次确认上传文件的类型为：<br><span style="font-weight:bolder;font-size: 27px">
            <span style="color:#00B281">仅</span> ${this.dept} <span style="color:#00B281">可见</span> ？</span></p>`,
          "",
          {
            dangerouslyUseHTMLString: true,
            customClass: "uploadBox_class",
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            cancelButtonClass: "btn-upload-cancel",
            confirmButtonClass: "btn-upload-confirm",
            center: true,
            showClose: false,
            type: "warning",
          }
        ).catch((err) => err); //用catch来捕获错误消息
        if ("confirm" === confirmRes) {
          //用户点击了确认
          this.upload();
        }
      } else if (this.radio == 0) {
        const confirmRes = await this.$confirm(
          "<img src=" +
            url +
            `><br><br><br><p style="font-size: 22px">请您再次确认上传文件的类型为：<br><span style="color:#FFB354;
            font-weight:bolder;font-size: 27px">仅自己可见</span> ？</p>`,
          "",
          {
            dangerouslyUseHTMLString: true,
            customClass: "uploadBox_class",
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            cancelButtonClass: "btn-upload-cancel",
            confirmButtonClass: "btn-upload-confirm",
            center: true,
            showClose: false,
            type: "warning",
          }
        ).catch((err) => err); //用catch来捕获错误消息
        if ("confirm" === confirmRes) {
          //用户点击了确认
          this.upload();
        }
      } else {
        this.dept = [];
        this.departmentArr.forEach((a) => {
          let c = this.noDept.findIndex((b) => a === b);
          if (c > -1);
          else this.dept.push(a);
        });
        console.log(this.dept);
        const confirmRes = await this.$confirm(
          "<img src=" +
            url +
            `><br><br><br><p style="font-size: 22px">请您再次确认上传文件的类型为：<br><span style="font-weight:bolder;font-size: 27px">
            <span style="color:#B20600">仅</span> ${this.noDept} <span style="color:#B20600">不可见</span> ？</span></p>`,
          "",
          {
            dangerouslyUseHTMLString: true,
            customClass: "uploadBox_class",
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            cancelButtonClass: "btn-upload-cancel",
            confirmButtonClass: "btn-upload-confirm",
            center: true,
            showClose: false,
            type: "warning",
          }
        ).catch((err) => err); //用catch来捕获错误消息
        if ("confirm" === confirmRes) {
          //用户点击了确认
          this.upload();
        }
      }
    },
    //跳转我的文档模块
    jumpToMyDoc() {
      this.$router.push("/MyselfDownload");
    },
    //多选框显示
    allSee() {
      this.partVisible = false;
      this.noVisible = false;
      this.fileType = 1;
    },
    ISee() {
      this.partVisible = false;
      this.noVisible = false;
      this.fileType = 0;
    },
    partSee() {
      this.partVisible = true;
      this.noVisible = false;
      this.fileType = 2;
    },
    noSee() {
      this.partVisible = false;
      this.noVisible = true;
      this.fileType = 2;
    },
    // 点击设置标签
    setTag(item) {
      this.isTagRepeat = 0;
      if (this.formData.tags.length >= this.totalTag) return;
      for (let i = 0; i < this.formData.tags.length; i++) {
        if (item == this.formData.tags[i]) {
          this.$message({
            type: "warning",
            message: "已有标签",
          });
          this.isTagRepeat = 1;
        }
      }
      if (this.isTagRepeat) return;
      this.formData.tags.push(item);
    },
    // 删除标签
    handleClose(tag) {
      this.formData.tags.splice(this.formData.tags.indexOf(tag), 1);
    },
    showDialog() {
      getTagsList()
        .then((res) => {
          let value = res.code;
          if (value == 200) {
            this.tag = res.data;
            console.log(res.msg);
          } else console.log("失败");
        })
        .catch((e) => {
          console.log(e);
        });
      this.tagVisible = true;
    },
    // 输入框键入标签
    handleInputConfirm() {
      this.isTagRepeat = 0;
      if (this.formData.tags.length >= this.totalTag) return;
      for (let i = 0; i < this.formData.tags.length; i++) {
        if (this.input == this.formData.tags[i]) {
          this.$message({
            type: "warning",
            message: "已有标签",
          });
          this.isTagRepeat = 1;
        }
      }
      if (this.isTagRepeat) return;
      if (this.input) {
        this.formData.tags.push(this.input);
      }
      this.input = "";
    },
    // 重新传封面
    uploadButtonClick() {
      this.isShowImgUpload = false; //隐藏本地预览组件
      this.coverImg = null;
    },
    // 无封面
    clearImg() {
      console.log(this.coverImg);
      this.isShowImgUpload = false; //隐藏本地预览组件
      this.coverImg = null;
      console.log(this.coverImg);
    },
    // 预览封面
    imgSaveToUrl(event) {
      this.coverImg = event.raw;
      console.log(this.coverImg);
      // 获取上传图片的本地URL，用于上传前的本地预览
      var URL = null;
      if (window.createObjectURL != undefined) {
        // basic
        URL = window.createObjectURL(event.raw);
      } else if (window.URL != undefined) {
        // mozilla(firefox)
        URL = window.URL.createObjectURL(event.raw);
      } else if (window.webkitURL != undefined) {
        // webkit or chrome
        URL = window.webkitURL.createObjectURL(event.raw);
      }
      // 转换后的地址为 blob:http://xxx/7bf54338-74bb-47b9-9a7f-7a7093c716b5
      this.localUrl = URL;
      this.isShowImgUpload = true; //呈现本地预览组件
    },
    //判断文件类型
    matchType(fileName) {
      //后缀获取
      var suffix = "";
      //获取类型结果
      var result = "";
      try {
        var fileArr = fileName.split(".");
        suffix = fileArr[fileArr.length - 1];
      } catch (err) {
        suffix = "";
      }
      //匹配txt
      var txtlist = ["txt"];
      result = txtlist.some(function (item) {
        return item === suffix;
      });
      if (result) {
        result = "txt";
        return result;
      }
      //匹配doc
      var doclist = ["doc", "docx"];
      result = doclist.some(function (item) {
        return item === suffix;
      });
      if (result) {
        result = "doc";
        return result;
      }
      //匹配pdf
      var pdflist = ["pdf"];
      result = pdflist.some(function (item) {
        return item === suffix;
      });
      if (result) {
        result = "pdf";
        return result;
      }
      //匹配ppt
      var pptlist = ["ppt", "pptx"];
      result = pptlist.some(function (item) {
        return item === suffix;
      });
      if (result) {
        result = "ppt";
        return result;
      }
      //匹配xls
      var xlslist = ["xls", "xlsx"];
      result = xlslist.some(function (item) {
        return item === suffix;
      });
      if (result) {
        result = "xls";
        return result;
      }
      //匹配zip
      var ziplist = ["zip", "rar"];
      result = ziplist.some(function (item) {
        return item === suffix;
      });
      if (result) {
        result = "zip";
        return result;
      }
      return result;
    },
  }
}
</script>
<style lang="less">
.uploadBox_class {
  position: relative;
  width: 390px;
  height: 420px;
  border: 4px solid orange;
  background-color: whitesmoke;
  .el-message-box__header {
    height: 0;
    padding-top: 0;
  }
  .el-message-box__headerbtn .el-message-box__close {
    color: #3a3d46;
  }
  .el-message-box__status.el-icon-warning {
    display: none;
  }
  .el-message-box__status + .el-message-box__message {
    padding: 0;
    margin: 0;
  }
  .el-message-box__message p {
    text-align: center;
    color: black;
    margin-top: 20px;
  }
}
.btn-upload-cancel {
  position: absolute;
  bottom: 50px;
  right: 50px;
  float: right;
  width: 120px;
  height: 40px;
  line-height: 5px;
  background-color: orange;
  color: white;
  font-size: 16px;
}
.btn-upload-confirm {
  position: absolute;
  bottom: 50px;
  left: 50px;
  width: 120px;
  height: 40px;
  line-height: 5px;
  font-size: 16px;
}
.loading-dialog {
  margin-top: 200px;
  .el-dialog {
    height: 120px;
    width: 200px !important;
    overflow: hidden;
    background-color: white;
  }
}
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background: rgb(255, 255, 255);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: rgb(136, 136, 136);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgb(100, 100, 100);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:active {
  background: rgb(68, 68, 68);
  border-radius: 10px;
}
.no-see {
  .el-checkbox__input {
    width: 18px;
    height: 18px;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background: url(@/assets/image/upload/x.png) no-repeat center;
    border: 1px solid white;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 10px;
    background-size: 17px;
    vertical-align: middle;
    color: white;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner::after {
    content: none;
  }
}
.backgroud-box-ins {
  .el-form-item.is-required:not(.is-no-asterisk)
    > .el-form-item__label::before {
    content: "*";
    color: #f56c6c;
    position: absolute;
    left: 84px;
    top: -5px;
  }
  .radio0 {
    .el-radio__input.is-checked .el-radio__inner {
      border-color: orange;
      background: orange;
    }
  }
  .radio2 {
    .el-radio__input.is-checked .el-radio__inner {
      border-color: green;
      background: green;
    }
  }
  .radio3 {
    .el-radio__input.is-checked .el-radio__inner {
      border-color: red;
      background: red;
    }
  }
  .groupBox {
    .el-radio-group {
      float: left;
      margin-top: 20px;
    }
    .el-cascader-node > .el-radio,
    .el-radio:last-child {
      margin-right: 30px;
    }
  }
  .el-select {
    width: 300px;
  }
  .el-select {
    position: relative;
    float: left;
  }
  .tag-dialog {
    .el-dialog {
      height: 400px;
      width: 550px;
    }
    .el-dialog__header {
      padding-top: 10px;
      padding-bottom: 0px;
      border: 1px solid rgb(224, 224, 224);
    }
    .el-dialog__headerbtn {
      top: 10px;
      right: 10px;
    }
    .el-dialog__body {
      padding-top: 10px;
      height: 350px;
    }
  }
  .el-upload--picture-card {
    height: 94px;
    width: 160px;
    line-height: 112px;
    margin-left: -30px;
  }
  .el-upload__tip {
    margin-left: -50px;
    line-height: 1.2;
  }
  .el-form-item {
    margin-bottom: 0px;
    position: relative;
  }
  .el-tag {
    margin-bottom: 10px;
  }
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    float: left;
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 10px;
  }
  .input-new-tag {
    float: left;
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
}
</style>
<style lang="less" scoped>
.spanStyle {
  display: inline-block;
  width: 150px;
  overflow: hidden; /*超出的文本隐藏*/
  text-overflow: ellipsis; /* 溢出用省略号*/
  white-space: nowrap;
  font-size: 16px;
}
.X-box {
  position: relative;
  background-color: #f0f3fa;
  height: 90px;
  width: 160px;
  margin-top: 40px;
}
.XX {
  position: absolute;
  background: #999;
  background-size: auto;
  color: #fff;
  line-height: 20px;
  right: -8px;
  top: -8px;
  display: none;
  width: 20px;
  height: 20px;
  font-size: 14px;
  text-align: center;
  background-size: contain;
  border-radius: 50%;
  cursor: pointer;
}
.X-box:hover .XX {
  display: block;
}
.success-jump {
  width: auto;
  height: 300px;
  text-align: center;
}
.upload-button {
  position: absolute;
  margin-left: 530px;
  margin-top: 60px;
}
.confirm-button {
  margin-right: 30px;
  width: 120px;
  height: 40px;
  line-height: 5px;
  background-color: rgba(22, 155, 213, 1);
  border: none;
  border-radius: 5px;
  font-weight: 700;
  font-style: normal;
  font-size: 20px;
}
.cancel-button {
  color: white;
  margin-right: 40px;
  width: 120px;
  height: 40px;
  line-height: 5px;
  background-color: rgba(255, 179, 84, 1);
  border: none;
  border-radius: 5px;
  font-weight: 700;
  font-style: normal;
  font-size: 20px;
}
.bottom-tip {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 12px;
  color: gray;
}
.backgroud-box-ins {
  margin-top: 30px;
  display: inline-block;
  overflow: auto;
  text-align: center;
  height: 650px;
  width: 1000px;
  border-radius: 6px;
  transition-duration: 0.9s;
  -webkit-transition-duration: 0.9s;
  background-color: white;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.349019607843137);
}
.building {
  background: url("@/assets/image/upload/background.jpg");
  background-size: 100% 100%;
  background-repeat: "no-repeat";
  width: 100%;
  min-height: 100vh;
}
.page-editor {
  background: #f5f6f7;
}

.tinymce-editor {
  width: 950px;
  margin: 0 auto;
}

.empty {
  width: 100%;
  height: 100px;
}

</style>